<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<h3 id="siteName">php中文网</h3>
</body>
<script>
    $(function () {
        //绑定事件
        $("#siteName").bind("click",function () {
            //将新元素添加到当前JQuery对象-中- 还在标签里面
            // $(this).append("www.php.cn");
            //prepend()将新元素添加到当前元素的前面，他还在当前元素中
            // $(this).prepend("<a href='http://www.php.cn'>点击访问</a>")

            //after()将新元素添加到当前-对象-后面-
            // $(this).after("<p style='color: red'>永久免费</p>");
            //before()将新元素添加到当前元素的前面
            // $(this).before("<h2>欢迎来到：</h2>")

            //replaceWith()替换当前元素 h3替换成h1
            // $(this).replaceWith('<h1>'+$(this).text()+'</h1>');

            $(this).replaceWith(function () {
                return "<h2 style='color: red;'>专业平台</h2>";
            })



        })
    })
</script>
</html>